@extends('admin.layout.layout')

@section('content')

<div class="col-lg-12">
    <h3>商品评论</h3>
        <fieldset disabled="">
            <div class="form-group">
                <label for="disabledSelect">商品名:</label>
                <input class="form-control goodsname" id="disabledInput" type="text" placeholder="" value="{{$goodsinfo[0]->goodsname}}">
            商品指数:
                @for($i=0; $i < $goodsinfo[0]->star; $i++)
                    <span class="glyphicon glyphicon-star" style="color:red"></span>
                @endfor
                {{$goodsinfo[0]->star}}星
            </div>
        </fieldset>

    <div class="comments">
       <div class="col-xs-5 col-xs-offset-2 pcomment">
            <p class="addmodel" style="border-radius:30%;background:white;color:gray;font-weight:bold;text-indent:5em">添加评论</p>
            <div class="operation" style="display:none"><button class="add btn btn-primary" onclick=add("comments")>添加评论</button></div>

       </div> 
    </div>
</div>

<script>
    //标题样式修改
    $('.goodsname').css({'textAlign':'center','color':'gray','fontWeight':'bold'});
    //当前商品的id
    var gid = {{$goodsinfo[0]->gid}};
    //评论坐标
    var x = '';
    //获取商品名元素
    //判断是否存在评论信息
    var id = "{{$goodsinfo[0]->gid}}";
    //发送ajax请求获取商品评论
    $.get('/admin/comments/message',{id:id},function(data){
        console.log(data);
        if(data){   
            //遍历存在的评论信息
            for(var l=0; l < data.length; l++){
                //获取评论显示元素
                var parents = $('.comments').fadeIn(2000);
                //评论信息,包括回复等等信息
                var message = data[l].message;
                //回复正则匹配
                var preg = /floor:(\d)+,id:(\d)+,name:.+?.,answer:.+?#/g;
                var answer;
                //在评论信息中,匹配回复id与回复信息
                 if((answer = message.match(preg)) != null){
                    //评论显示元素
                    //添加评论模板
                    $('.comments').append('<div class="col-xs-5 col-xs-offset-2 pcomment answer'+l+'"></div>');
                    //获取message索引地址
                    var index = message.indexOf('#$')
                    //获取message信息
                    var mass = message.substr(8,index-8);
                    //显示信息
                    var cont = $('.answer'+l).append('<div class="opr"></div>');
                    cont.append('<span style="gray"> '+(l+1)+' 楼 </span><span style="color:red"> &nbsp用户: '+data[l].username+'</span>');
                    cont.append('<span>评论信息: </span><p style="border-radius:30%;background:white;color:gray;font-weight:bold;text-indent:5em" info="answer" userid='+data[1].uid+'">'+mass+'</p>');
                    cont.append('<div class="operation" style="display:none"><button class="add btn btn-primary" onclick=add("answer")>添加评论</button> <button class="edit btn btn-primary" onclick=alter("'+data[l].id+'")>修改评论</button> <button class="del btn btn-primary" onclick=del("'+data[l].id+'")>删除评论</button></div>');

                    for(var i = 0; i < answer.length; i++){
                        //修改样式
                        cont.css({'border':'8px solid rgb(99,156,132)','color':'gray','width':'350px','height':answer.length*100,'background':'rgba(206,231,247,0.3)','border-radius':'40%'});
                        //分解信息
                        var content = answer[i].split(',');
                        //分解id
                        //分解回复
                        //分解楼层

                            var id = 0;
                            var name = '';
                            var floor = '';
                            var over = '';
                        for(var o=0; o < content.length; o++){

                            //判断是否是是最后一个是否是结束符
                            //详细分割拼接的信息
                            var bb =  content[o].split(':')
                            //判断是什么拼接信息
                            if(bb[0] == 'id'){
                                id = bb[1];
                            }
                            if(bb[0] == 'name'){
                                name = bb[1];
                            }
                            if(bb[0] == 'floor'){
                                floor = bb[1];
                            }
                            if(bb[0] == 'answer'){
                                over = bb[1];
                            }

                        }
                        //留言信息
                        cont.append('<span style="color:gray"> '+data[l].id+' 楼<span style="color:red">用户:'+name+'回复:'+data[l].username+':</span></span>');
                        cont.append('<p style="text-indent:5em;border-radius:30%;background:white;font-weight:bold" userid="'+id+'">'+over+'</p>');
                        cont.append('<div class="operation" style="display:none"><button class="add btn btn-primary" onclick=add("answer")>添加评论</button> <button class="edit btn btn-primary" onclick=alter("'+data[l].id+'")>修改评论</button> <button class="del btn btn-primary" onclick=del("'+data[l].id+'")>删除评论</button></div>');
                        }
                    }else{
                        //如果,只有评论信息,直接输出
                            //添加评论模板
                            $('.comments').append('<br><div class="col-xs-6 col-xs-offset-1 pcomment message'+l+'" style="margin:40px 50px"></div>');
                            
                            //设置评论样式
                            var messag = $('.message'+l).append('<div class="opr"></div>');
                            messag.css({'fontSize':'18','border':'7px solid rgba(206,231,247,0.5)','color':'gray','width':'350px','height':((message.length-((message.length)-2))*50),'background':'rgba(165,183,175,0.1)','border-radius':'40%'})
                            //留言信息
                            messag.append('<span style="color:gray"> '+(l+1)+' 楼 <span style="color:red"> 用户 :'+data[l].username+'</span></span>');
                            messag.append('<span> 评论信息: </span><p style="text-indent:5em;border-radius:30%;background:white;font-weight:bold" userid='+data[l].uid+'">'+message+'</p>');
                            messag.append('<div class="operation" style="display:none"><button class="add btn btn-primary" onclick=add("comment")>添加评论</button> <button class="edit btn btn-primary" onclick=alter("'+data[l].id+'")>修改评论</button> <button class="del btn btn-primary" onclick=del("'+data[l].id+'")>删除评论</button></div>');
                    }
            }
        }
    },'json');

var operationelement = '';
var operationalter = '';
//邦定鼠标点击事件,获取操作菜单事件
$('div').on("click",'p',function(){
    //显示按钮
    $(this).next('.operation').css('display','block');
    //获取当前操作评论位置
    x = $(this).offset();
    //选中元素,改变背景色
    $(this).css('backgroundColor','yellow');
    //获取操作对象
    operationelement = $(this).parent();
    operationalter = $(this);   

    //如果,编辑存放编辑器元素,已经存在阻止添加
    if($('.tes').length > 0){
        return false;
    }
    //添加存放编辑器容器
    $(this).parent().append('<div class="tes" style="width:450px;height:200px;display:none"></div>');

});
 
//移出评论事件,改变回原来颜色
$('div').on('mouseout','p',function(){
    $(this).css('backgroundColor','white');
})
//绑定鼠标从评论文本移出事件
$('div').on('mouseout','.operation',function(){
    $(this).css('display','none');
})
//保存编辑器文本
var saveText = '';
$(".alert").alert()
//编辑器添加
function add(info,uid){
    if($('textarea').length > 0){
        alert('之前操作,还未完成');
        return false;    
    }
    var editmachine = '<textarea class="form-control xxx" rows="3"></textarea>';
    //显示编辑器存放容器
    $('.tes').attr('name','test').css('display','block');
    //添加编辑器
    $('.tes').append(editmachine);
    //动态邦定编辑评论事件位编辑器位置
    var top = x.top+60;
    var left = x.left;
    $('.tes').offset({top:top,left:left});
    //获取焦点
    $('textarea').focus();
    
    $('textarea').blur(function(){
        //变量保存编辑框文本
        saveText = $('.xxx').val();
        //文本编辑框,获取焦点事件
        $('textarea').focus();
        //编辑框不存在编辑信息
        if(saveText.length == ''){
            $('.tes').remove();
        }
    })
    //添加操作按钮
    $('.tes').append('<div class="editope"><button ifclick="false" class="btn btn-primary editok" onclick=save("'+info+'")>确定</button> <button class="btn btn-primary" onclick=end()>取消</button>');
}
//console.log(gid,uid);
//文本框按钮操作函数
function save(info){
    //发送ajax
    $.ajax({
        url:'/admin/comments/insert',
        data:{'_token':'{{csrf_token()}}','type':info,'info':saveText,'gid':gid},
        dataType:'json',
        type:'post',
        success:function(data){
            //判断数据是否插入成功
            if(data){
                //数据插入成功,移出该元素
                $('.tes').remove();
                window.location.reload();
                }

        },
        error:function(gid){
            alert("服务器连接错误,请与管理员联系");
        },
        async:false,
    })
    
}
function end(){
    //移出编辑框元素
    $('.tes').remove();
}

//动态邦定编辑评论事件
function alter(id){
    if($('textarea').length > 0){
        alert('之前操作,还未完成');
        return false;    
    }
    var editmachine = '<textarea class="form-control xxx" rows="3"></textarea>';
    //显示编辑器存放容器
    $('.tes').attr('name','test').css('display','block');
    //添加编辑器
    $('.tes').append(editmachine);
    //动态邦定编辑评论事件位编辑器位置
    var top = x.top+60;
    var left = x.left;
    $('.tes').offset({top:top,left:left});

    //获取当前评论的内容

    $('textarea').val(operationalter.text());
    //获取焦点
    $('textarea').focus();
    
    console.log(id);
    
    $('textarea').blur(function(){
        //变量保存编辑框文本
        saveText = $('.xxx').val();
        //文本编辑框,获取焦点事件
        $('textarea').focus();
        //编辑框不存在编辑信息
        if(saveText.length == ''){
            $('.tes').remove();
        }
    })
    //添加操作按钮
    $('.tes').append('<div class="editope"><button ifclick="false" class="btn btn-primary editok" onclick=alert("'+id+'")>确定</button> <button class="btn btn-primary" onclick=end()>取消</button>');    
}
//评论修改
function alert(id){
    //发送ajax修改评价内容
    $.post('/admin/comments/alert',{id:id,message:saveText,'_token':"{{csrf_token()}}"},function(data){
        //判断数据修改
        if(data){
            //移出文本框
            $('.tes').remove();
            //修改评论文本信息
            operationalter.text(saveText);
        }
    })
}

//动态邦定删除评论事件
function del(id){
    //删除评论
    $.ajax({
        url:'/admin/comments/delete',
        type:'post',
        data:{id:id,'_token':"{{csrf_token()}}"},
        dataType:'json',
        success:function(data){
            if(data){
                //删除评论
                operationelement.remove();
            }
        },
        error:function(){
            alert('数据库连接失败,请与管理员联系');
        },
        aynfc:false,
    })
}

</script>


@endsection
